<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="专家预约,安排手术,术后随访">
    <meta name="description" content="点一台提供专业的专家坐诊医生在线咨询答疑，并根据您的实际病情给出专业性的意见及合理的就医方案。">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${ctx!}/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx!}/admin/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/admin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/admin/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link href="${ctx!}/front/layui/css/layui.css" rel="stylesheet">
		<style>
        .btnList.layui-input-block {
	         margin-left: 0;
           text-align: center;
         }
    </style>    
</head>

<body>
	<div class="wrapper wrapper-content animated fadeInRight">
	
	
		<form class="layui-form layui-form-pane" id="form1">
		
		  <div class="layui-form-item">
		    <label class="layui-form-label"><span style="color:red">*</span>真实姓名</label>
		    <div class="layui-input-block">
		      <input type="text" id="userName" name="userName" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label"><span style="color:red">*</span>联系电话</label>
		    <div class="layui-input-block">
		      <input type="text" id="mobile" name="mobile" lay-verify="phone"  placeholder="请输入手机号码" autocomplete="off" class="layui-input" >
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
          <label class="layui-form-label"><span style="color:red">*</span>验 证 码</label>
          <div class="layui-input-inline">
            <input type="text" id="code" name="code" lay-verify="number"  placeholder="请输入验证码" autocomplete="off" class="layui-input" >
          </div>
          <div class="">
          	<button class="layui-btn layui-btn-normal" type="button" id="sms">免费获取验证码</button>
          </div>
         </div>
        
		  <div class="layui-form-item">
		    <label class="layui-form-label">预约医院</label>
		    <div class="layui-input-block">
		      <input type="text" name="hospital" placeholder="请输入预约医院" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">预约专家</label>
		    <div class="layui-input-block">
		      <input type="text" name="profession" placeholder="请输入预约专家" value="${profession!}" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">备注</label>
		    <div class="layui-input-block">
		      <textarea name="description" placeholder="请描述病情，或其他您需要的帮助" class="layui-textarea"></textarea>
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <div class="layui-input-block">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		  </div>
		</form>


    </div>      

     <!-- 全局js -->
    <script src="${ctx!}/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/admin/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="${ctx!}/admin/js/content.js?v=1.0.0"></script>
    <script src="${ctx!}/front/layui/layui.js" ></script>
    <script>

	layui.use(['form', 'upload'], function(){  
	  var form = layui.form();
	  
	  $("#sms").click(function(){
	    var mobile = $("#mobile").val(),css = $(this).attr("class"),input = $(this);
	  	
	  	var countdown = 60;
	  	function settime(obj) { 
			if(countdown == 0) {
				obj.attr("class", "layui-btn layui-btn-normal");
				obj.text("免费获取验证码");
				countdown = 60;
				return;
			} else {
				obj.attr("class","layui-btn layui-btn-disabled");
				obj.text("重新发送(" + countdown + ")");
				countdown--;
			}
			setTimeout(function() { 
    			settime(obj) }
    		,1000) 
	 	}	    
	    
	    if(css.indexOf("layui-btn-normal") > -1){
	    	$.ajax({
    		    type: "POST",
    		    dataType: "json",
    		    url: "${ctx!}/api/sms-code",
    		    data: {"mobile":mobile},
                success: function(msg){
                	if(msg.isOk){
                		layer.msg("发送成功");
						settime(input);
                	}
                },
                error: function(jqXHP,textStatus,errorThrown){
                    layer.alert(jqXHP.responseText);
                }
             })
             
	    }else{
	    	layer.msg("已经发送过验证码，10分钟内有效");
	    }
	  		
	  })

	  form.on('submit(formDemo)', function(data){
 			  $.ajax({
    		    type: "POST",
    		    dataType: "json",
    		    url: "${ctx!}/api/register",
    		    data: $("#form1").serialize(),
                success: function(msg){
                	if(msg.isOk){
                			layer.msg(msg.msg, {time: 2000},function(){
		   						parent.layer.closeAll();
		   					});
                	}else{
                		layer.msg(msg.msg);
                	}
                },
                error: function(jqXHP,textStatus,errorThrown){
                    layer.alert(jqXHP.responseText);
                }
            })
   	    		
	    return false;
	  });
	});
	</script>
    
</body>

</html>
